<template>
    <div class="chat-container">
        <h2 class="chat-title">聊天组件</h2>
        <div class="messages-container">
            <h3 class="messages-title">消息记录:</h3>
            <div v-for="(message, index) in messages" :key="index" class="message-item">{{ message }}</div>
        </div>
        <div class="input-container">
            <input v-model="input" class="message-input" placeholder="输入你的消息..."/>
            <button @click="sendMessage" class="send-button">发送</button>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import WebSocketService from "../ws/websocketService.js";

const input = ref('');
const messages = ref([]);
let webSocketService = null;

const displayMessage = (message) => {
    console.log('接收到的完整消息:', message); // 输出接收到的完整消息

    try {
        // 将字符串解析为 JSON 对象
        const parsedMessage = JSON.parse(message);

        if (parsedMessage?.choices?.length > 0) {
            const content = parsedMessage.choices[0].delta.content;
            // 添加接收到的消息到 messages 数组
            messages.value.push('对方: ' + content);
        } else {
            console.error('接收到的消息格式不正确:', parsedMessage);
        }
    } catch (error) {
        console.error('解析消息时出错:', error);
    }
};

onMounted(() => {
    webSocketService = new WebSocketService('ws://localhost:21800/ws/chat');
    webSocketService.connect();

    // 向 messages 数组添加一个空字符串以便后面显示
    messages.value.push(''); // 可以根据需要删除这行

    webSocketService.addMessageListener((message) => {
        displayMessage(message); // 调用逐步显示函数
    });
});

onBeforeUnmount(() => {
    if (webSocketService) {
        webSocketService.disconnect();
    }
});

const sendMessage = () => {
    if (input.value) {
        // 将自己的消息添加到 messages 数组
        messages.value.push('我: ' + input.value);
        webSocketService.sendMessage(input.value);
        input.value = '';
    }
};
</script>

<style scoped>
/* 样式保持不变 */
.chat-container {
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
}

.chat-title {
    text-align: center;
    margin-bottom: 20px;
}

.messages-container {
    height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    background-color: #fff;
}

.messages-title {
    margin-bottom: 10px;
}

.message-item {
    padding: 5px;
    border-bottom: 1px solid #eee;
}

.message-item:last-child {
    border-bottom: none;
}

.input-container {
    display: flex;
}

.message-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
}

.send-button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.send-button:hover {
    background-color: #0056b3;
}
</style>
